<template>
    <div v-if="mainView" class=" q-pa-md heAndWi">
        <q-layout view="lHr Lpr lFr" class="bg-grey-3 text-black  " container :style="layoutStyle">
            <!--        <q-layout view="lH Lp lF" class="bg-grey-3 text-black  " container :style="layoutStyle">-->
            <q-header class="bg-grey-3 text-black">
                <div class="headDiv">
                    <q-toolbar class="bg-grey-3 head_avt_div">
                        <q-btn
                                :icon="left? 'keyboard_arrow_left' :'keyboard_arrow_right'"
                                class="butGap bg-grey-3 left_list_btn"
                                size="15px"
                                flat
                                round
                                @click="left = !left"
                        />
                        <q-btn round flat @click="right = !right">
                            <q-avatar size="55px">
                                <!--                                判断是否在线，不在头像变灰色-->
                                <img v-if="booSingleChat" :src="chatInfo.img" :class="chatInfo.lineState? '':'imgGray'">
                                <img v-else :src="groupImgTemp">
                            </q-avatar>
                        </q-btn>
                        <!--判断在不在线 不在状态点为红色-->
                        <q-btn v-if="booSingleChat" round flat :class="chatInfo.lineState ?
                         'tostateP bg-green':' tostateP  bg-red'" size="3px"/>
                        <p class=" toNameP text-subtitle1"> {{ booSingleChat?chatInfo.name:chatHouseList.name }}</p>
                        <q-space/>
                        <div class="video-pro-div">
                            <q-btn @click="showVoiceCall" class="butGap" flat icon="phone" size="13px" style="background: #3db16b; color: white"/>
                            <q-btn class="butGap" flat icon="videocam" size="13px" style="background: #696969; color: white"/>
                            <q-btn class="butGap add_btn" style="background: #696969; color: white" flat icon="list" size="13px">
                                <q-menu auto-close :offset="[-20, 10]">
                                    <q-list class="list_width">
                                        <q-item clickable>
                                            <q-item-section @click="right = !right">个人资料</q-item-section>
                                        </q-item>
                                        <q-item clickable>
                                            <q-item-section @click="onDev">添加到黑名单</q-item-section>
                                        </q-item>
                                        <q-item clickable>
                                            <q-item-section @click="onDev"> 退出群聊</q-item-section>
                                        </q-item>
                                    </q-list>
                                </q-menu>
                            </q-btn>
                        </div>
                    </q-toolbar>
                </div>
                <q-separator/>
            </q-header>
            <q-drawer v-model="left" show-if-above class="bg-grey-3" side="left" :width="450">
                <div class="bg-grey-3 heAndWi">
                    <div class="row heAndWi">
                        <!--                        群组等切换栏-->
                        <div class="col-2 bg-white" style="height: 100%">
                            <div class="row-md" style="height: 100%;max-width: 100%">
                                <div style="height: 65px;max-width:100%;padding: 11%" class="bg-green">
                                    <q-avatar>
                                        <img :src="loginUser.avatar" size="50px">
                                    </q-avatar>
                                </div>
                                <div style="height: 70%;max-width: 100%;margin-top: 25px">
                                    <q-tabs v-model="menuTabSelect" vertical class="text-teal bg-white" @input="changeImList">
                                        <q-tab class="text-green" name="chatHouse" icon="chatbox"/>
                                        <q-tab class="text-green" name="friend" icon="person"/>
                                        <q-tab class="text-green" name="group" icon="groups"/>
                                    </q-tabs>
                                </div>
                                <!--                                <div class="account_time_div">-->
                                <!--                                    <q-btn @click="mainView = false" round flat icon="access_time" size="12px"/>-->
                                <!--                                </div>-->
                                <div class="account_notice_div">
                                    <Notice/>
                                </div>
                                <div class="account_setting_div">
                                    <AccountSetting :loginUser="loginUser"></AccountSetting>
                                </div>
                            </div>
                        </div>
                        <!--                        人/组列表-->
                        <div class="col-10  listDiv">
                            <div class="bg-white list_card">
                                <div class="row list_card_head">
                                    <div class=" row list_card_head_left">
                                        <span class="col-8 text-h5 text-weight-bold float-left">
                                            <p v-if="chatListType === 'chatHouse'"> 聊天室 </p>
                                            <p v-else-if="chatListType === 'group'"> 群组 </p>
                                            <p v-else-if="chatListType === 'friend'"> 好友 </p>
                                        </span>
                                        <span class=" col-4 text-caption text-green float-left" v-if="chatListType === 'chatHouse'">
                                            ({{chatHouseList.users.length}}人)
                                        </span>
                                    </div>
                                    <div class="add_btn_div" v-if="chatListType != 'chatHouse'">
                                        <ul class="list-inline">
                                            <li class="list-inline-item">
                                                <q-btn round icon="add" class="bg-grey-4" style=" color: black" flat size="12px">
                                                    <q-menu auto-close>
                                                        <q-list>
                                                            <q-item clickable>
                                                                <q-item-section @click="addFriend">加好友/加群</q-item-section>
                                                            </q-item>
                                                            <q-item clickable>
                                                                <q-item-section @click="onDev">创建群组</q-item-section>
                                                            </q-item>
                                                        </q-list>
                                                    </q-menu>
                                                </q-btn>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="row-md list_card_body">
                                    <q-input v-model="searchKey" color="green-8" filled :dense="true" label="输入关键字查询"/>
                                </div>
                                <div class="row-md " style="height:85%;overflow:hidden;">
                                    <ChatHouse @toChat="toChat" v-if="chatListType === 'chatHouse'" :searchKey="searchKey"></ChatHouse>
                                    <Friend @toChat="toChat" v-if="chatListType === 'friend'" :searchKey="searchKey"></Friend>
                                    <Group @toChat="toChat" v-if="chatListType === 'group'" :searchKey="searchKey"></Group>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </q-drawer>
            <q-drawer v-model="right" :breakpoint="0" class="bg-grey-3" side="right" :width="320">
                <div class="bg-grey-3 heAndWi profie-par-div">
                    <div class="bg-white rounded-borders profie-div q-pa-sm">
                        <Profile @changeData="changeRightDrawer" :type="menuTabSelect" :accountNum="chatInfo.accountNum"/>
                    </div>

                </div>
            </q-drawer>
            <q-page-container v-model="pageContainer" class="bg-grey-3 text-black">
                <q-page ref="pageMinHeight">
                    <MsgBox ref="msgBoxDiv" @atMemberFeedBack="atMember"/>
                </q-page>
            </q-page-container>
            <q-footer class="bg-grey-3 text-black ">
                <EditeInput ref="imSendEditInput"/>
            </q-footer>
        </q-layout>
    </div>
</template>
<script>
  import './chat.css'
  import MsgBox from '../../components/msgbox/msgbox'
  import ChatHouse from '../../components/list/chatHouse/index.vue'
  import Friend from '../../components/list/friend/index.vue'
  import Group from '../../components/list/group/index.vue'
  import AccountSetting from '../../components/account/setting/index.vue'
  import Notice from '../../components/account/notice/index.vue'
  import Profile from '../../components/profile/index.vue'
  import AddFriend from '../../components/add/index.vue'
  import EditeInput from '../../components/common/editInput.vue'
  import JIM from '../../utils/JIM'
  import {mapActions, mapGetters} from 'vuex'
  import ImStorage from "../../sdk/utils/ImStorage";
  import store from '@/store'
  import VoiceCall from '../../components/voiceCall/index'

  export default {
    components: {EditeInput, MsgBox, Friend, Group, Notice, ChatHouse, AccountSetting, Profile},
    name: 'ChatIndex',
    data () {
      return {
        layoutStyle: {
          height: '650px'
        },
        chatListType: 'chatHouse',
        groupImgTemp: require('../../assets/logo/60_60/11.png'),
        left: true,
        right: false,
        booSingleChat: false,//当前是否和朋友单聊
        bigEditPopShow: false,
        mainView: true,
        userListLoading: false,
        pageContainer: false,
        message: '',
        searchKey: '',
        menuTabSelect: 'chatHouse',//chatHouse friend group
        chatInfo: {},//当前聊天人的基本信息
        image: "",
        imageUrl: "",
      }
    },
    computed: {
      ...mapGetters({
        chatHouseList: 'onGetChatHouseUserList',
        loginUser: 'onGetLoginInfo'
      }),
    },
    methods: {
      ...mapActions([
        'onSendText'// 发送消息
      ]),
      showVoiceCall(){
        this.$q.dialog({
          component: VoiceCall,
          parent: this,
        })
      },
      toChat (e) {
        console.log(JSON.stringify(e))
        this.chatInfo = {
          chatId: e.userId,
          accountNum: e.userId,
          name: e.nick,
          lineState: e.status === 'online' ? true : false,
          img: e.avatar
        }
        ImStorage.setImStorage('chatHisId', e.userId)
        this.booSingleChat = true
        this.menuTabSelect = 'friend'
        this.changeImList()
        store.commit('changerChatUser')
      },
      atMember (e) {
        this.$refs['imSendEditInput'].atMember(e)
      },
      addFriend () {
        this.$q.dialog({
          component: AddFriend,
          // 如果要访问自定义组件中的
          // 路由管理器、Vuex存储等,
          // 则为可选：
          parent: this, // 成为该Vue节点的子元素
                        // （“this”指向您的Vue组件）
                        // （此属性在<1.1.0中称为“root”
                        //  仍然可以使用，但建议切换到
                        //  更合适的“parent”名称）

          // 传递给组件的属性
          // （上述“component”和“parent”属性除外）：
          text: 'something',
          // ...更多属性...
        })
      },
      changeRightDrawer (value) {
        this.right = value
      },
      getHeight () {
        this.layoutStyle.height = window.innerHeight - 40 + 'px'
      },
      fetchData () {
        JIM.open(new Date().getTime(), '123')
      },
      changeImList () {
        this.chatListType = this.menuTabSelect
        this.right = false
        if (this.chatListType === 'chatHouse') {
          ImStorage.clearImStorage('chatHisId')
          this.booSingleChat = false
          store.commit('changerChatUser')
        }
      },
      onDev () {
        this.$q.notify({
          message: '功能努力开发中...',
          avatar: require('../../assets/logo/60_60/11.png'),
          color: 'green',
          timeout: '1000',
          position: 'top-right'
        })
      }
    },
    created () {
      ImStorage.clearImStorage('chatHisId')
      window.addEventListener('resize', this.getHeight)
      this.getHeight()
      if (!JIM.conn) {
        this.fetchData()
      }
      // 现在暂时默认聊天室的id为100
      localStorage.setItem('chatGroupId', '100')
    },
    destroyed () {
      window.removeEventListener('resize', this.getHeight)
    }
  }
</script>

